<template>
  <div class="wrap">
    <el-container>
      <!-- 侧边导航栏 -->
      <el-aside width="250px">
        <div class="logo">
          <span>BMP管理系统</span>
          <i class="iconfont icon-zhankai" @click="changeNav"></i>
        </div>
        <!-- 登陆用户信息 -->
        <div class="userInfo clearFix">
          <div class="header_img">
            <img src="../assets/testHerder.webp" alt />
          </div>
          <div class="user">
            <p>{{userName}}</p>
            <p>财务经理</p>
          </div>
        </div>

        <el-scrollbar style="height:120%">
          <el-menu :default-active="$route.path" class="el-menu-vertical-demo" router unique-opened
            background-color="#001529" text-color="#fff" active-text-color="lightblue" :collapse="isCollapse">
            <template v-for="(menu, index) in list">
              <el-menu-item :index="menu.path" v-if="menu.children==undefined" :key="index">
                <i :class="menu.icon"></i>
                <span class="tohide" slot="title">{{menu.title}}</span>
              </el-menu-item>

              <el-submenu v-if="menu.children!=undefined && menu.hidden!==true" :key="index" :index="index + ''">
                <!-- 二级标题 -->
                <template slot="title">
                  <i :class="menu.icon"></i>
                  <span class="tohide">{{ menu.title }}</span>
                </template>

                <!-- 三级级标题 -->
                <el-menu-item-group v-for="(menuItem, menuIndex) in menu.children" :key="menuIndex">
                  <el-menu-item :index="menuItem.path" v-if="menuItem.hidden!==true">
                    {{ menuItem.title }}</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
            </template>
          </el-menu>
        </el-scrollbar>
      </el-aside>
      <el-container>
        <!-- header -->
        <el-header :style="headerStyle" class="homeIndex">
          <div class="left">
            <span class="company">银桥装饰材料有限公司</span>
            <span>
              <i class="iconfont icon-laba"></i>
              今晚10-12点系统将维护，请悉知！
            </span>
          </div>
          <div class="header_img">
            <img src="../assets/testHerder.webp" alt />
          </div>
          <div class="right">
            <i class="iconfont icon-qushi"></i>
            <i class="iconfont icon-tongzhifill"></i>
          </div>
        </el-header>

        <!-- 主体内容 -->
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<style src="../style/home.css">
</style>
<script>
import navList from "../utils/routerList";
export default {
  data () {
    return {
      headerStyle: {
        height: "70px",
        lineHeight: "70px",
        textAlign: "left"
      },
      // 导航展开
      isCollapse: false,
      // 导航数据
      list: navList,
      userName: ''
    }
  },
  methods: {
    handleOpen (key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath);
    },
    //  伸缩导航
    changeNav () {
      if (this.isCollapse == false) {
        this.isCollapse = true;
      } else {
        this.isCollapse = false;
      }
    },
    // 获取用户信息
    getUer () {
      if (sessionStorage.getItem('employee')) {
        let user = JSON.parse(sessionStorage.getItem('employee'))
        this.userName = user.name
      } else {
        this.userName = '测试账号'
      }
    }
  },
  mounted () {
    this.getUer()
  }
}
</script>
